<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    isActive: Boolean,
    text: String,
    isCertificate: Boolean,
  },
});
</script>

<template>
  <view class="tab-item">
    <view class="tab-item-title" :class="{ 'tab-item-active': isActive }">
      {{ text }}
    </view>
    <view class="tab-item-tag" v-if="isCertificate">已认证</view>
  </view>
</template>

<style lang="scss">
.tab-item {
  position: relative;

  .tab-item-title {
    font-size: 28rpx;
    color: #666666;
    line-height: 48rpx;
  }

  .tab-item-active {
    color: #ff7900;
    font-weight: bold;
  }

  .tab-item-tag {
    position: absolute;
    top: -16rpx;
    right: -50rpx;
    padding: 0 8rpx;
    font-size: 16rpx;
    color: #1bc76f;
    line-height: 24rpx;
    font-weight: bold;
    border-radius: 16rpx 16rpx 16rpx 0;
    border: 2rpx solid #1bc76f;
    background-color: #ffffff;
  }
}
</style>